<template>
	<view>
		<u-form :model="form" ref="uForm" labelPosition="left">
			<!-- 输入框 -->
			<u-form-item borderBottom :label="item.name" v-for="(item,index) in keyData" :key="item.key"
				labelWidth="330rpx">
				<template v-if="item.type === 'inp'">
					<u--input v-model="form[item.key]"></u--input>
				</template>
				<!-- number类型 -->
				<template v-if="item.type === 'number'">
					<u--input v-model="form[item.key]" @input="Numberfun($event,item.key,index)"></u--input>
					<!-- {{typeof form[item.key]}} -->
				</template>
				<!-- 文本 -->
				<template v-if="item.type === 'text'">
					<!-- {{item}} -->
					<!-- {{form[item.key]}}--3 -->
					<!-- <u--input v-model="form[item.key]" @input="Numberfun($event,item.key,index)"></u--input> -->
					<view class="">
						<!-- <view>{{item.name}}</view> -->
						<view><text >{{form[item.key]}}</text></view>
					</view>
					<!-- {{typeof form[item.key]}} -->
				</template>
				<!-- 时间选择器 -->
				<template v-if="item.type === 'picker'">
					<y-picker v-model="form[item.key]"></y-picker>
				</template>
				<!-- 文本域 -->
				<template v-if="item.type === 'textarea'">
					<u-textarea  v-model="form[item.key]" class="textarea" placeholder="请输入内容"></u-textarea>
				</template>
				<!-- span文字 -->
				<template v-if="item.type === 'span'">
					<view class="recently-a">
						<view class="recently-a-a">
						</view>
						<view class="recently-a-b">
							{{item.textSpan}}
						</view>
					</view>
				</template>
				<!-- 多选 -->
				<template v-if="item.type === 'select'">
					<u-checkbox-group placement="column" v-model="form[item.key]">
						<view class="checkbox-wrap" v-for="(v,i) in item.sctList" :key="i">
							<u-checkbox  activeColor="green" :label="v.name"
								:name="v.id"></u-checkbox>
						</view>
						
					</u-checkbox-group>
				</template>
				<!-- 单选 -->
				<template v-if="item.type === 'radio'">
					<u-radio-group v-model="form[item.key]" placement="column">
						<u-radio shape="square" :customStyle="{marginBottom: '8px'}" v-for="(v, i) in item.sctList"
							:key="v.id" :label="v.name" :name="v.id">
						</u-radio>
					</u-radio-group>
				</template>
				<!-- 新增用款人 -->
				<view v-if="item.type === 'add'" class="add_box">

					<view v-for="(v,i) in item.addMesList" :key="i">

						<u-form-item borderBottom label="姓名" labelWidth="300rpx">
							<u-input :value="form.paymentPoList[i]['name']" @input="modelFun($event,i,'name')"
								border="none"></u-input>
						</u-form-item>
						<u-form-item borderBottom label="需求金额(万)" labelWidth="300rpx">
							<u-input type="number" border="none" :value="form.paymentPoList[i]['money']"
								@input="modelFun($event,i,'money')"></u-input>
						</u-form-item>
						<u-form-item borderBottom label="联系方式" labelWidth="300rpx">
							<u-input  :value="form.paymentPoList[i]['phone']" @input="modelFun($event,i,'phone')"
								border="none"></u-input>
						</u-form-item>
						<view class="delete-img" v-if="i!=0" @click.stop="deleteItem(i)">
							X
						</view>
					</view>

					<view class="add-btn" @click="addBtn">
						<view>新增用款人信息</view>
					</view>
				</view>

			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		name: "showFrom",
		props: {
			keyData: {
				type: Array,
				default: () => []
			},
			personPoList: {
				type: Array,
				default: () => []
			},
			TabeformData: {
				type: Object,
				default: () => ({})
			},
			keyName: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				dataForm:"",
				show: false,
				establishDate: Number(new Date()),
				form: {
					// personPoList: [],
					paymentPoList: []

				}
			}
		},
		watch: {
			keyData: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					// //console.log(newVal);
					newVal.forEach(k => {
						if (k.type === "add") {
							k.addMesList.forEach(r => {
								this.form.paymentPoList.push({})
							})
						}
					})
				}
			},
			TabeformData: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					//console.log(Object.keys(newVal).length == 0, "newVal", newVal);
					if (Object.keys(newVal).length == 0) return

					newVal.paymentPoList = newVal.paymentPoList
					for (let key in newVal) {
						try {
							newVal[key] = JSON.parse(newVal[key])
						} catch (e) {}
					}
					this.form = newVal
				}
			},

			form: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					//console.log(newVal, "");
				}
			}
		},
		methods: {
			Numberfun(e, name, index) {
				if (e && !isNaN(e)) {
					this.form[name] = Number(e)
				}
			},
			groupChange() {},
			modelFun(e, index, key) {
				// console.log(isFinite());
				if(key === "money"){
					e = isFinite(e)?parseInt(e*10000)/10000:e
				}
				if (this.form.paymentPoList[index]) {
					this.form.paymentPoList[index][key] = e
				} else {
					let obj = {}
					obj[key] = e
					this.form.paymentPoList[index] = obj
				}
			},
			Summary() {
		
				return {
					keyName: this.keyName,
					form: this.form
				}
			},
			checkboxChange(key, n) {
				this.form[key] = n.toString()
			},
			// 新增用款人信息
			addBtn() {
				for (var i = 0; i < this.keyData.length; i++) {
					if (this.keyData[i].type === 'add') {
						let obj = {
							name: '',
							money: '',
							phone: '',
						}
						this.keyData[i].addMesList.push(obj)
						this.form.paymentPoList.push(obj)
					}
				}
			},
			// 用款人删除
			deleteItem(index) {
				for (var i = 0; i < this.keyData.length; i++) {
					if (this.keyData[i].type === 'add') {
						this.keyData[i].addMesList.splice(index, 1)
						this.form.paymentPoList.splice(index, 1)

					}
				}
			},
		}

	}
</script>

<style lang="less">
	.checkbox-wrap{
		margin-bottom: 10rpx;
	}
	.textarea {
		border: solid 1px #ccc;
	}

	.recently-a {
		height: 67rpx;
		display: flex;

		.recently-a-a {
			width: 6rpx;
			height: 28rpx;
			background: #1478FF;
			margin-top: 20rpx;
		}

		.recently-a-b {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
			margin-left: 8rpx;
			margin-top: 17rpx;
		}
	}

	.mine_add_message {
		// width: 100%;
		display: block;
	}

	.add-btn {
		width: 400rpx;
		height: 60rpx;
		border: 2px solid #1478FF;
		border-radius: 30rpx;

		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1478FF;

		text-align: center;
		line-height: 60rpx;

		margin-top: 30rpx;
		margin-left: 125rpx;
	}

	.delete-img {
		width: 42rpx;
		height: 42rpx;
		// position: absolute;
		// right: 0rpx;
		// top: 0rpx;
		color: red;
		border: 1rpx solid red;
		border-radius: 50%;
		text-align: center;
		margin-left: 285rpx;
		margin-top: 20rpx;
	}
</style>